<template>
  <a-row class="otherControlsContainer">
    <a-col class="placeholder" :span="18">
      <div class="voiceContainer">
        <span class="voiceIcon"  @click="muted"><img :src="voiceIcon" width="20" height="20"/></span>
        <div class="voiceProgress">
          <div class="voiceProgressBg" ref="voiceProgressBg" @click="controlVoiceClick"></div>
          <div class="currenVoice" @click="controlVoiceClick" :style="{width:defaultCurrentWidth}">
            <span></span>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="playlistContainer">
        <img src="@/assets/playlist.svg" width="20" height="20" @click="handlePlayListState">
      </div>
    </a-col>
  </a-row>
</template>

<script>
import mute from '@/assets/mute.svg';
import voice from '@/assets/voice.svg'
export default {
  name: "OtherControls",
  data() {
    return {
      voiceIcon:voice, // 默认非静音
      defaultCurrentWidth:'20%',// 默认宽度
    }
  },
  mounted() {
  },
  methods: {
    controlVoiceClick(e) {
      let bg = this.$bg;
      let voice = this.calculateVoice(e.offsetX)
      // 设置声音
      bg.musicPlayer.context.volume = voice.toFixed(1)
      this.defaultCurrentWidth = (voice.toFixed(2) * 100) +"%";
    },
    // 滑动事件参考
      // div.onmousedown=function(e){
      //
      //   var a1=e.screenX;
      //   div.onmouseup=function (e){
      //     var a2=e.screenX;
      //
      //     if(a1>a2){console.log("左滑啊")}
      //     if(a1<a2){console.log("右滑啊")}
      //   }
    calculateVoice(clickPosition){ // 计算音量
      let width = this.$refs.voiceProgressBg.offsetWidth;
      return  (clickPosition/width);
    },
    muted() { // 设置静音/不静音
      let bg = this.$bg;
      bg.musicPlayer.context.muted = !bg.musicPlayer.context.muted
      if (bg.musicPlayer.context.muted) {
        this.voiceIcon = mute;
      } else {
        this.voiceIcon = voice;
      }
    },
    handlePlayListState(){// 隐藏或显示播放列表
      this.$eventBus.$emit('showPlayListState')
    }
  }
}
</script>

<style scoped>
.otherControlsContainer {
  width: 100%;
  height: 4rem;
  padding: 1rem 0;
}

.placeholder {
  height: 2rem;
  display: inline-block;

}

.playlistContainer {
  display: inline-block;
  height: 2rem;
  padding-top: 0.25rem;
}

/*声音*/
.voiceContainer {
  height: 2rem;
  width: 100%;
  position: relative;

}

.voiceIcon {
  position: absolute;
  left: 0;
  top: 10%;
}

.voiceProgress {
  position: absolute;
  left: 1.5rem;
  display: inline-block;
  height: 0.5rem;
  width: calc(100% - 1.5rem);
  top: 35%;
  /*border: 1px red solid;*/
}

.voiceProgressBg {
  display: inline-block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: #c9c9c9;
  border-radius: 0.5rem;
  cursor: pointer;
}

.currenVoice {
  display: inline-block;
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  background-color: red;
  border-radius: 0.5rem;
  cursor: pointer;
}

.currenVoice > span {
  display: inline-block;
  position: absolute;
  right: 0;
  border-radius: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  top: -0.15rem;
  background-color: red;
}

.currenVoice > span:hover {
  display: inline-block;
  position: absolute;
  right: 0;
  top:  -0.15rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.5rem;
  background-color: red;

}
</style>
